<template>
    <div class="footer" :style="bgcolor">
        <div class="footer_top">
            <div class="center">
                <ul class="flex flex_row_justify">
                    <li class="black">
                        <p class="title">关于我们</p>
                        <ul class="content">
                            <a @click="aboutClick(item, index)" v-for="(item, index) in aboutItem" :key="index"
                                :title="item.title" target="_blank" rel="noopener noreferrer">
                                <li>{{ item.title }}</li>
                            </a>
                        </ul>
                    </li>
                    <li class="black">
                        <p class="title">服务项目</p>
                        <ul class="content">
                            <a @click="serviceClick(item, index)" v-for="(item, index) in serviceItem" :key="index"
                                :title="item.title" target="_blank" rel="noopener noreferrer">
                                <li>{{ item.title }}</li>
                            </a>
                        </ul>
                    </li>
                    <li class="black">
                        <p class="title">新闻资讯</p>
                        <ul class="content">
                            <a @click="NewsClick(item, index)" title="本所动态" v-for="(item, index) in newsItems"
                                :key="index">
                                <li>{{ item.title }}</li>
                            </a>
                        </ul>
                    </li>
                    <li class="black">
                        <p class="title">国家中心及省站</p>
                        <ul class="content">
                            <a @click="nationcenterClick(item, index)" v-for="(item, index) in nationcenterlist"
                                :key="index" :title="item.title" target="_blank" rel="noopener noreferrer">
                                <li>{{ item.title }}</li>
                            </a>
                        </ul>
                    </li>
                    <li class="about">
                        <p class="title">联系我们</p>
                        <ul class="content cursorDefault">
                            <a href="javascript:;" title="">
                                <li>主办单位：广东省中山市质量计量监督检测所</li>
                            </a>
                            <a href="javascript:;" title="">
                                <li>地址： 广东省中山市博爱六路48号</li>
                            </a>
                            <a href="javascript:;" title="">
                                <li>电子邮件：zszjs@163.net</li>
                            </a>
                            <a href="javascript:;" title="">
                                <li>电话：0760-88162840</li>
                            </a>
                            <a href="javascript:;" title="">
                                <li>质检业务：0760-88307614</li>
                            </a>
                            <a href="javascript:;" title="">
                                <li>灯具业务：0760-88162830（城区）</li>
                            </a>
                            <a href="javascript:;" title="">
                                <li>22396050（古镇）</li>
                            </a>
                            <a href="javascript:;" title="">
                                <li>计量业务：0760-88321709</li>
                            </a>
                            <a href="javascript:;" title="">
                                <li>办公室：88162840</li>
                            </a>
                        </ul>
                    </li>
                    <div class="foot_weixin">
                        <div class="img">
                            <div class="picture_container">
                                <img src="@/static/scancode/code.png" title="微信二维码" alt="微信二维码" />
                            </div>
                        </div>
                        <p class="txt">关注我们</p>
                        <div class="icon clear_float">
                            <div class="social">
                                <a class="iconfont icon-weixin" href="javascript:;" tabindex="-1">
                                    <div class="wechat-qrcode">
                                        <h4>微信扫一扫：分享</h4>
                                        <div class="qrcode">
                                            <img src="../../src/images/home/ercode.png" />
                                        </div>
                                        <div class="help">
                                            <p>微信里点“发现”，扫一下</p>
                                            <p>二维码便可将本文分享至朋友圈。</p>
                                        </div>
                                    </div>
                                </a>
                                <a class="social-share-icon iconfont icon-qq" :href="copyRightInfo.gotoQQ"
                                    target="_blank" rel="noopener noreferrer"></a>
                            </div>
                        </div>
                    </div>
                </ul>
            </div>
        </div>
        <div align="center" class="footer_bottom flex flex_column_center">
            <div class="center clear_float" style="display: flex; flex-direction: row; justify-content: center">
                <div class="fl icp">
                    <div class="icon flex flex_column_center" @click="gotoService">
                        <img class="fl hoverTips" src="../../src/images/home/bottom_icon01.png" alt="广东省中山市质量计量监督检测所"
                            title="广东省中山市质量计量监督检测所" />
                    </div>
                    <p class="fl flex ">Copyright ©2024 广东省中山市质量计量监督检测所. <a :href="copyRightInfo.govern"
                            title="" rel="nofollow" target="_black" style="margin-left: 5px">粤ICP备07515084号-1</a></p>
                </div>
                <p class="icon flex flex_column_center">
                    <img src="../../src/images/home/bottom_icon02.png" alt="" class="fl" style="margin-left: 18px" />
                    <span><a :href="copyRightInfo.beiAn" title="" rel="nofollow" target="_black"
                            style="margin-left: 5px">粤公网安备 44200002443220号</a></span>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
import { encodeURL, decodeURL } from '../../src/utils/index.js'
export default {
    name: 'MainFooter',
    data() {
        return {
            bgcolor: {},
            serviceItem: [],
            nationcenterlist: [],
            aboutItem: [
                { title: '本所简介', url: '/about', industryCat: 'ZJ_BSJJ' },
                { title: '公正性声明', url: '/about', industryCat: 'ZJ_GZXSM' },
                { title: '荣誉资质', url: '/about', industryCat: 'ZJ_RYZZ' },
                { title: '组织架构', url: '/about', industryCat: 'ZJ_ZZJG' },
                { title: '业务流程', url: '/about', industryCat: 'ZJ_YWLC' },
                { title: '人才招聘', url: '/about', industryCat: 'ZJ_RCZP' },
                { title: '本所视频', url: '/about', industryCat: 'ZJ_BSSP' },
                { title: '客户展示', url: '/about', industryCat: 'ZJ_KHZS' },
            ],
            newsItems: [
                { title: '本所动态', url: '/news', tab: 'ZJ_BSDT' },
                { title: '行业新闻', url: '/news', tab: 'ZJ_HYXW' },
                { title: '采购公告', url: '/news', tab: 'ZJ_ZBGG' },
                { title: '通知公告', url: '/news', tab: 'ZJ_TZGG' },
            ],
            copyRightInfo: {
                govern: decodeURL(encodeURL(process.env.VUE_APP_GOVERN_URL)),
                beiAn: decodeURL(encodeURL(process.env.VUE_APP_BEIAN_URL)),
                gotoQQ: decodeURL(encodeURL(process.env.VUE_APP_GOTO_QQ_URL)),
            },
        };
    },
    mounted() {
        this.copyRightInfo.govern = this.decodeBase64('aHR0cDovL2JlaWFuLm1paXQuZ292LmNuLw==');
        this.copyRightInfo.beiAn = this.decodeBase64('aHR0cDovL3d3dy5iZWlhbi5nb3YuY24vcG9ydGFsL3JlZ2lzdGVyU3lzdGVtSW5mbz9yZWNvcmRjb2RlPTQ0MjAwMDAyNDQzMjIw');
        this.copyRightInfo.gotoQQ = this.decodeBase64('aHR0cDovL2Nvbm5lY3QucXEuY29tL3dpZGdldC9zaGFyZXFxL2luZGV4Lmh0bWw/dXJsPWh0dHBzJTNBJTJGJTJGd3d3LnpzempzLmNvbSUyRiZhbXA7dGl0bGU9JUU1JUI5JUJGJUU0JUI4JTlDJUU3JTlDJTgxJUU0JUI4JUFEJUU1JUIxJUIxJUU1JUI4JTgyJUU4JUI0JUE4JUU5JTg3JThGJUU4JUFFJUExJUU5JTg3JThGJUU3JTlCJTkxJUU3JTlEJUEzJUU2JUEzJTgwJUU2JUI1JThCJUU2JTg5JTgwJmFtcDtzb3VyY2U9JUU1JUI5JUJGJUU0JUI4JTlDJUU3JTlDJTgxJUU0JUI4JUFEJUU1JUIxJUIxJUU1JUI4JTgyJUU4JUI0JUE4JUU5JTg3JThGJUU3JTlCJTkxJUU3JTlEJUEzJUU2JUEzJTgwJUU2JUI1JThCJUU2JTg5JTgwJmFtcDtkZXNjPSZhbXA7cGljcz1odHRwcyUzQSUyRiUyRnd3dy56c3pqcy5jb20lMkZ1cGxvYWRzJTJGaW1hZ2UlMkYyMDIwMDUxMSUyRjE1ODkxNzM3NzAucG5n');
        this.init();
    },
    watch: {
        '$route.path': function (val) {
            if (val == '/column') {
                this.bgcolor = {
                    backgroundColor: '#802222',
                };
            } else {
                this.bgcolor = {};
            }
        },
    },
    methods: {
        decodeBase64(base64String) {
            try {
                console.log('copyRightInfocopyRightInfo', atob(base64String), base64String);

                return atob(base64String);
            } catch (e) {
                console.error('解码Base64字符串时发生错误:', e);
                return '';
            }
        },
        aboutClick(data, index) {
            this.$router.push({
                path: data.url,
                query: {
                    title: data.title,
                    index: index,
                },
            });
        },
        nationcenterClick(data, index) {
            this.$router.push({
                path: '/nation',
                query: {
                    title: data.title,
                    index: index,
                },
            });
        },
        NewsClick(data, index) {
            this.$router.push({
                path: '/news',
                query: {
                    status: 'more',
                    tab: data.tab,
                    index: index
                }
            });


        },
        serviceClick(data, index) {
            this.$router.push({
                path: '/service',
                query: {
                    title: data.title,
                    index: index,
                },
            });
        },
        init() {
            let theme = localStorage.getItem('theme');
            if (theme == 'red') {
                this.bgcolor = {
                    backgroundColor: '#802222',
                };
            } else {
                this.bgcolor = {};
            }
            // 获取服务项目
            this.getserviceItem();
            // 获取国家中心及省站
            this.getnationals();
        },
        getserviceItem() {
            let params = {
                tenantId: 1,
                id: 3,
            };
            // 获取产品树
            this.$http.get(this.$api.serveItemApi.listPlateCatAndChildren, params).then((res) => {
                if (res.code == 200) {
                    let result = [];
                    const objArray = res.data;
                    if (objArray.length > 0) {
                        for (let item of objArray) {
                            let detail = {};

                            result.push({
                                title: item.title,
                            });
                        }
                    }
                    this.serviceItem = result;
                }
            });
        },
        getnationals() {
            let params = {
                tenantId: 1,
                id: 7,
            };
            // 获取产品树
            this.$http.get(this.$api.nationsApi.listPlateCatAndChildren, params).then((res) => {
                if (res.code == 200) {
                    let result = [];
                    const objArray = res.data;
                    if (objArray.length > 0) {
                        for (let item of objArray) {
                            let detail = {};
                            detail.id = item.id;
                            detail.title = item.title;
                            result.push(detail);
                        }
                    }
                    this.nationcenterlist = result.slice(0, 10);
                }
            });
        },
        gotoService(){
            let url ='https://bszs.conac.cn/sitename?method=show&id=534D0C9A04D35BCCE053022819AC42A9'
            window.open(url,"-blank");
        }
    },
};
</script>
<style lang="scss" scoped>
@import '@/styles/share.scss';

/********************************* footer STRAT ********************************/
.footer {
    background-color: #224f80;
}

.footer .footer_top {
    padding: 60px 0 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer .footer_top .black .title,
.footer .footer_top .about .title {
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0px;
    color: #ffffff;
    margin-bottom: 10px;
}

.footer .footer_top .black .content li,
.footer .footer_top .about .content li {
    line-height: 32px;
    letter-spacing: 0px;
    color: #ffffff;
    opacity: 0.7;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.footer .footer_top .black .content li:hover,
.footer .footer_top .about .content li:hover {
    opacity: 1;
}

.footer .footer_top .black:nth-of-type(4),
.footer .footer_top .about:nth-of-type(4) {
    margin-right: 0;
}

.footer .footer_top .about {
    margin-right: 40px;
}

.footer .footer_top .foot_weixin .img .picture_container {
    padding-top: 100%;
    width: 120px;
}

.footer .footer_top .foot_weixin .txt {
    margin-top: 15px;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0px;
    color: #ffffff;
    opacity: 0.5;
    text-align: center;
}

.footer .footer_top .foot_weixin .icon {
    margin-top: 20px;
    text-align: center;
}

.footer .footer_top .foot_weixin .icon .iconfont {
    font-size: 21px;
    color: #ffffff;
    cursor: pointer;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.footer .footer_top .foot_weixin .icon .iconfont:nth-of-type(2) {
    margin: 0 15px;
}

.footer .footer_top .foot_weixin .icon .iconweibo:hover {
    color: #ea5d5c;
}

.footer .footer_top .foot_weixin .icon .iconweixin1:hover {
    color: #42bf39;
}

.footer .footer_top .foot_weixin .icon .iconsign_qq:hover {
    color: #12b7f5;
}

.footer .footer_bottom {
    height: 70px;
    color: #ffffff;
    opacity: 0.5;
    line-height: 70px;
}

.footer .footer_bottom .gongwnag {
    margin-left: 15px;
}

.footer .footer_bottom .gongwnag img {
    margin-right: 5px;
}

.footer .footer_bottom .icon {
    float: left;
    height: 70px;
    margin-right: 10px;
}

/********************************* footer END ********************************/
//reset
ul {
    margin: 0;
    padding: 0;
    border: black solid 0;
}

.picture_container {
    position: relative;
    overflow: hidden;
    background: none;
}

.cursorDefault a {
    cursor: default;
}
</style>
